<template>
  <div>
    <van-nav-bar title="登录" />

    <van-cell-group inset style="margin-top: 100px">
      <van-field
        v-model="phone"
        center
        clearable
        label="手机号"
        placeholder="请输入手机号"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>

      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
      </van-field>
    </van-cell-group>

    <div style="margin: 16px">
      <van-button round block type="primary"> 提交 </van-button>
    </div>
  </div>
</template>

<script>
import { getCode } from "@/api/api";
export default {
  data() {
    return {
      phone: "",
      sms: "",
    };
  },
  methods: {
    async sendCode() {
      const res = await getCode({ phone: this.phone });
      showToast(res.code);
    },
  },
};
</script>
